import React, {Component} from 'react';
import {Text, View, StyleSheet, Button} from 'react-native';

// 定义 ErrBoundary 组件的 props 类型
interface ErrBoundaryProps {
  children: React.ReactNode;
}

// 定义 ErrBoundary 组件的 state 类型
interface ErrBoundaryState {
  hasError: boolean;
}

class LHLErrBoundary extends Component<ErrBoundaryProps, ErrBoundaryState> {
  constructor(props: ErrBoundaryProps) {
    super(props);
    this.state = {hasError: false};
  }

  // 当子组件抛出错误时，此方法会被调用
  componentDidCatch(error: Error, errorInfo: React.ErrorInfo) {
    // 可以在这里记录错误信息到日志服务
    console.log('Error caught by ErrBoundary:', error, errorInfo);
    this.setState({hasError: true});
  }

  handleRefresh = async () => {};

  render() {
    if (this.state.hasError) {
      // 当发生错误时，显示错误提示页面
      return (
        <View style={styles.errorContainer}>
          <Text style={styles.errorText}>抱歉，发生了一个错误</Text>
          <Text style={styles.errorText}>
            错误边界组件，可根据业务自定义提示内容
          </Text>
        </View>
      );
    }
    // 没有错误时，渲染子组件
    return this.props.children;
  }
}

const styles = StyleSheet.create({
  errorContainer: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#fff',
  },
  errorText: {
    fontSize: 18,
    color: 'red',
    margin: 10,
  },
});

export default LHLErrBoundary;
